<template>
    <div class="container-header">
        <div>
            欢迎您，{{userStore.userName}}
        </div>
        <n-dropdown trigger="hover" @select="handleSelect" :options="userOptions">
            <n-avatar class="avatar" size="medium">{{userStore.userName}}</n-avatar>
        </n-dropdown>
    </div>
</template>

<script setup lang="ts">
import { useMessage } from 'naive-ui'
import useUserStore from '@/store/modules/user'
import { renderIcon } from '@/utils'
import router from "../../router/index";
import {
  PersonCircleOutline as UserIcon,
  Pencil as EditIcon,
  LogOutOutline as LogoutIcon
} from '@vicons/ionicons5'

const userStore = useUserStore();
let message = useMessage()
// eslint-disable-next-line
const handleSelect = (keys: any) => {
    switch(keys) {
        case "logout":
            message.info("退出系统")
            userStore.logout()
            router.push("/")
            break;
        default:
            message.info("哈哈哈")
            break;
    }
}
const userOptions = [
    {
          label: '用户资料',
          key: 'profile',
          icon: renderIcon(UserIcon)
        },
        {
          label: '编辑用户资料',
          key: 'editProfile',
          icon: renderIcon(EditIcon)
        },
        {
          label: '退出登录',
          key: 'logout',
          icon: renderIcon(LogoutIcon)
        }
]
</script>

<style lang="less" scoped>
.container-header {
    // background-color: #fff;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    line-height: 10px;
    .avatar {
        position: relative;
        right: 50px;
    }
}
</style>